<template>
	<view class="page">
		<view class="tab-box">
			<view class="tab-item" :class="{'selected' : tabselected == item.id}" :key="item.id" v-for="(item,index) in tabList" @click="tabChange(item.id)">
				{{item.name}}
			</view>
		</view>
		<view class="search-box">
			<icon class="icon" type="search" size="20"></icon>
			<input class="input" type="text" />
		</view>
		<scroll-view class="scrollpage" scroll-y>
			<card @tap="goDetail"></card>
		</scroll-view>
	</view>
</template>

<script>
	import card from '@/subcontractList/order/purchase/component/card/card';
	export default {
		components:{
			card
		},
		data() {
			return {
				tabselected:0,
				tabList:[
					{
						id:0,
						name:'全部'
					},
					{
						id:1,
						name:'待审核'
					},
					{
						id:2,
						name:'通过'
					},
					{
						id:3,
						name:'未通过'
					},
					{
						id:4,
						name:'待接单'
					},
					{
						id:5,
						name:'采购中'
					},
					{
						id:6,
						name:'被退回'
					},
				],
			}
		},
		methods: {
			tabChange:function(id){
				this.tabselected = id;
			},
			goDetail:function(){
				uni.navigateTo({
					url: '/subcontractList/order/purchase/waitbill/detail/detail'
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		background-color:#eaeaea;
		min-height: 100vh;
	}
	.tab-box{
		background-color: white;
		width: 100%;
		height: 70rpx;
		display: flex;
		box-sizing: border-box;
		justify-content: space-between;
		font-size: 28rpx;
		.tab-item{
			line-height:70rpx;
			color:#888888;
			padding:0 10rpx;
		}
		.selected{
			border-bottom:3px solid black;
			color:black;
		}
	}
	.search-box{
		width: calc(100% - 40rpx);
		margin:20rpx;
		background-color: white;
		display: flex;
		height: 80rpx;
		border-radius: 10rpx;
		box-shadow:0px 0px 10px #8A8A8A;
		.icon{
			margin: 20rpx;
		}
		.input{
			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
		}
	}
	.scrollpage{
		width: calc(100% - 40rpx);
		margin: 0 20rpx;
	}
</style>
